<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDivFlag">一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeBlue">蓝色</button>
    <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 功能一
    const showDivFlag = ref(true)
    function show () {
      showDivFlag.value = true
    }
    function hide () {
      showDivFlag.value = false
    }
    // 功能二

    const fontColor = ref('')
    function changeRed () {
      fontColor.value = 'red'
    }
    function changeBlue () {
      fontColor.value = 'blue'
    }
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>
